<template>
  <div>
    <!-- <div class="container"> -->
    <div class="my-ad">
      <img
        :src="adList[0].imgUrl"
        @click="toAd(0)"
        alt=""
      >
    </div>
    <div class="header">
      <span class="title">ئاۋات كىنولار</span>
      <span
        class="xsj"
        @click="toHotVideo"
      >&#8249;</span>
      <span
        class="txt"
        @click="toHotVideo"
      >تېخىمۇ كۆپ</span>
    </div>
    <div class="content">
      <div
        class="item"
        v-for="(item,index) in hotList"
        :key="index"
        @click="toVideo(item)"
      >
        <img
          :src="item.img_url"
          alt=""
        >
        <div class="title">{{item.name}}</div>
      </div>
    </div>
    <div class="my-ad">
      <img
        :src="adList[1].imgUrl"
        alt=""
        @click="toAd(1)"
      >
    </div>
    <div class="header">
      <span class="title">يېڭى كىنولار</span>
      <span
        class="xsj"
        @click="toNewVideo"
      >&#8249;</span>
      <span
        class="txt"
        @click="toNewVideo"
      >تېخىمۇ كۆپ</span>
    </div>
    <div class="content">
      <div
        class="item"
        v-for="(item,index) in newList"
        :key="index"
        @click="toVideo(item)"
      >
        <img
          :src="item.img_url"
          alt=""
        >
        <div class="title">{{item.name}}</div>
      </div>
    </div>
  </div>
  <!-- </div> -->
  </div>
</template>
<script>
import store from "../../utils/store";

export default {
  onShareAppMessage(options) {
    return {
      title: "مارس كىنوخانىسى",
      path: `/pages/index/main`,
      success: res => {},
      fail: () => {},
      complete: () => {}
    };
  },
  data() {
    return {
      hotList: "",
      newList: "",
      adList: ""
    };
  },
  methods: {
    toVideo(item) {
      store.commit("playVideo", item);
      this.$http.get("https://wx.15v3a.cn/weapp/counter?vid=" + item.id);

      // console.log(item);
      wx.navigateTo({ url: `/pages/VideoDetail/main?id=${item.video_url}` });
    },
    toHotVideo() {
      wx.navigateTo({ url: "/pages/HotVideo/main" });
    },
    toNewVideo() {
      wx.navigateTo({ url: "/pages/NewVideo/main" });
    },
    toAd(id) {
      wx.navigateTo({ url: "/pages/AD/main?from=videoPage&id=" + id });
    }
  },
  created() {
    this.$http
      .get("https://wx.15v3a.cn/weapp/videoList?from=video")
      .then(res => {
        // console.log(res);
        this.hotList = res.listHot;
        this.newList = res.listNew;
      });
  },
  onLoad() {
    let adList = wx.getStorageSync("config");
    this.adList = adList.adList.videoPage;
  },
  onReady() {
    wx.setNavigationBarTitle({ title: "مارس كىنوخانىسى" });
  }
};
</script>
<style lang="scss">
/* .container {
  position: relative; */
.my-ad {
  height: 260rpx;
  width: 96%;
  margin: 20rpx auto;
  border-radius: 30rpx;
  box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.header {
  // border: 1px solid red;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  margin: 10rpx auto;

  .xsj {
    float: left;
    // margin-top:  7rpx;
    margin-left: 20rpx;
    color: #929292;
    font-size: 51rpx;
  }
  .title {
    float: right;
    // margin-top: 22rpx;
    margin-right: 24rpx;
    color: #929292;
    font-size: 31rpx;
  }
  .txt {
    float: left;
    // margin-top:  7rpx;
    margin-left: 20rpx;
    color: #666;
    font-size: 25rpx;
  }
  ::after {
    content: "";
    display: "block";
    clear: both;
  }
}
.content {
  // position: absolute;
  top: 0;
  width: 96%;
  /* margin-top: 15rpx;
    margin-left: auto;
    margin-right: auto; */
  // height: 355rpx;
  display: grid;
  padding: 5rpx 10rpx;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  grid-gap: 17rpx;
  /*  display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-items: center; */

  .item {
    border-radius: 20rpx;
    height: 165rpx;
    box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
    .title {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.3);
      font-size: 25rpx;
      color: white;
      text-align: center;
      line-height: 40rpx;
      font-family: "Alp Ekran", Cambria, Cochin, Georgia, Times,
        "Times New Roman", serif, Arial, Helvetica, sans-serif !important;
    }
  }
}
</style>

